<template>
  <div class="add-car">
    <el-dialog
      v-el-drag-dialog="{ drag: true, full: true, resize: true }"
      title="车辆列表"
      :close-on-click-modal="false"
      :visible.sync="md.state"
      @close="closeMd"
      v-if="md.state"
      :width="'900px'"
    >
      <div style="margin-bottom: 15px">
        <el-table
          ref="multipleTable"
          :data="tableData"
          @selection-change="handleSelectionChange"
          style="width: 100%; height: 100%"
          border
        >
          <el-table-column type="selection" fixed width="55"> </el-table-column>
          <el-table-column prop="seats" label="座位数"> </el-table-column>
          <el-table-column prop="phone" label="电话"> </el-table-column>
          <el-table-column prop="plateNum" label="车牌号"> </el-table-column>
          <el-table-column prop="serviceType" label="营运性质">
            <template slot-scope="scope">
              {{ getCustom(scope.row.serviceType) }}
            </template>
          </el-table-column>
          <el-table-column prop="carColor" label="车辆颜色" width="120">
            <template slot-scope="scope">
              <span v-html="getCarColor(scope.row.carColor)"></span>
            </template>
          </el-table-column>
          <el-table-column prop="carUsage" label="车辆性质" width="120">
            <template slot-scope="scope">
              {{ getCusUsage(scope.row.carUsage) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="belongCompanyName"
            label="所属运输公司"
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="ownPurchaseDate"
            label="本公司购买日期"
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="purchaseDate"
            label="行驶证购车日期"
            width="200"
          >
          </el-table-column>
          <el-table-column prop="vehicleType" label="车辆类型">
            <template slot-scope="scope">
              {{ getCusUsage(scope.row.vehicleType) }}
            </template>
          </el-table-column>
          <el-table-column prop="isInternet" label="是否上网">
            <template slot-scope="scope">
              {{ scope.row.isInternet == 1 ? "否" : "是" }}
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="添加时间" width="200">
          </el-table-column>
          <el-table-column prop="repairTimeslot" label="维修时间" width="300">
            <template slot-scope="scope">
              <span v-html="getSEtimeText(scope.row.repairTimeslot)"></span>
            </template>
          </el-table-column>
          <el-table-column prop="startTime" label="启动时间" width="200">
          </el-table-column>
          <el-table-column prop="destoryTime" label="报停时间" width="200">
          </el-table-column>
          <el-table-column prop="downTime" label="下线时间" width="200">
          </el-table-column>
          <el-table-column prop="status" label="车辆状态">
            <template slot-scope="scope">
              <span v-if="compareTime(scope.row)">
                <el-button
                  style="color: red; border-color: red"
                  @click="handleStart(scope.row)"
                  >报停启动</el-button
                >
              </span>
              <span v-else>
                <span v-html="getCarStatus(scope.row)"></span>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="powerSource" label="动力来源">
            <template slot-scope="scope">
              {{ getPowerSource(scope.row.powerSource) }}
            </template>
          </el-table-column>
          <el-table-column prop="mileage" label="续航里程"> </el-table-column>
          <el-table-column prop="startTime" label="启动时间" width="200">
          </el-table-column
          ><el-table-column prop="fuel" label="正常油耗"> </el-table-column>
          <el-table-column prop="direction" label="方位"> </el-table-column>
          <el-table-column
            prop="dockedAddress"
            label="停靠地址全称"
            width="300"
          >
          </el-table-column>
          <el-table-column
            prop="simpleDockedAddress"
            label="停靠地址简称"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="dockedLatLon"
            label="停靠地址经纬度"
            width="300"
          >
            <template slot-scope="scope">
              <div>
                经度:{{ getlicensePhotoUrl(scope.row.dockedLatLon)[0] || 0 }}
              </div>
              <div>
                纬度:{{ getlicensePhotoUrl(scope.row.dockedLatLon)[1] || 0 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="drivingType" label="驾照需求">
          </el-table-column>
          <el-table-column
            prop="belongComapnySimName"
            label="所属公司简称"
            width="120"
          >
          </el-table-column>
          <el-table-column prop="runningArea" label="可跑区域">
            <template slot-scope="scope">
              {{ getRunningArea(scope.row.runningArea) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="licensePhotoUrl"
            label="驾驶证正反面"
            width="300"
          >
            <template slot-scope="scope">
              <div>
                <span v-if="getlicensePhotoUrl(scope.row.licensePhotoUrl)[0]">
                  正面：
                  <img
                    style="width: 40px; height: 40px; vertical-align: middle"
                    :src="
                      getlicensePhotoUrl(scope.row.licensePhotoUrl)[0] || ''
                    "
                    alt="暂无图片"
                  />
                </span>
                <span v-if="getlicensePhotoUrl(scope.row.licensePhotoUrl)[1]">
                  反面：
                  <img
                    style="width: 40px; height: 40px; vertical-align: middle"
                    :src="
                      getlicensePhotoUrl(scope.row.licensePhotoUrl)[1] || ''
                    "
                    alt="暂无图片"
                  />
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="purchaseDate" label="注册上户日期" width="200">
          </el-table-column>

          <el-table-column prop="carYear" label="车辆年限"> </el-table-column>
          <el-table-column prop="ownPurchaseDate" label="过户日期" width="200">
          </el-table-column>

          <el-table-column prop="customId" label="挂靠客户">
            <template slot-scope="scope">
              {{ getCustom(scope.row.customId) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="operationPhotoUrl"
            label="运营证正反面"
            width="300"
          >
            <template slot-scope="scope">
              <div>
                <span v-if="getlicensePhotoUrl(scope.row.operationPhotoUrl)[0]">
                  正面：
                  <img
                    style="width: 40px; height: 40px; vertical-align: middle"
                    :src="
                      getlicensePhotoUrl(scope.row.operationPhotoUrl)[0] || ''
                    "
                    alt="暂无图片"
                  />
                </span>
                <span v-if="getlicensePhotoUrl(scope.row.operationPhotoUrl)[1]">
                  反面：
                  <img
                    style="width: 40px; height: 40px; vertical-align: middle"
                    :src="
                      getlicensePhotoUrl(scope.row.operationPhotoUrl)[1] || ''
                    "
                    alt="暂无图片"
                  />
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="inspectDate" label="年审日期" width="200">
          </el-table-column>
          <el-table-column prop="carPlateUrl" label="车辆名牌" width="300">
            <template slot-scope="scope">
              <div>
                <img
                  v-if="getlicensePhotoUrl(scope.row.carPlateUrl)[0]"
                  style="width: 40px; height: 40px; vertical-align: middle"
                  :src="getlicensePhotoUrl(scope.row.carPlateUrl)[0] || ''"
                  alt="暂无图片"
                />
                <img
                  v-if="getlicensePhotoUrl(scope.row.carPlateUrl)[1]"
                  style="width: 40px; height: 40px; vertical-align: middle"
                  :src="getlicensePhotoUrl(scope.row.carPlateUrl)[1] || ''"
                  alt="暂无图片"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="engineNum" label="发动机号"> </el-table-column>
          <el-table-column prop="vinNum" label="车架号"> </el-table-column>
          <el-table-column prop="mileage" label="续航里程"> </el-table-column>
          <el-table-column prop="carPhotoUrl" label="车辆外观" width="300">
            <template slot-scope="scope">
              <div>
                <img
                  v-if="getlicensePhotoUrl(scope.row.carPhotoUrl)[0]"
                  style="width: 40px; height: 40px; vertical-align: middle"
                  :src="getlicensePhotoUrl(scope.row.carPhotoUrl)[0] || ''"
                  alt="暂无图片"
                />,
                <img
                  v-if="getlicensePhotoUrl(scope.row.carPhotoUrl)[1]"
                  style="width: 40px; height: 40px; vertical-align: middle"
                  :src="getlicensePhotoUrl(scope.row.carPhotoUrl)[1] || ''"
                  alt="暂无图片"
                />
                ,
                <img
                  v-if="getlicensePhotoUrl(scope.row.carPhotoUrl)[2]"
                  style="width: 40px; height: 40px; vertical-align: middle"
                  :src="getlicensePhotoUrl(scope.row.carPhotoUrl)[2] || ''"
                  alt="暂无图片"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="carLwh" label="车辆长宽高" width="120">
            <template slot-scope="scope">
              <div>长:{{ getlicensePhotoUrl(scope.row.carLwh)[0] || 0 }}cm</div>
              <div>宽:{{ getlicensePhotoUrl(scope.row.carLwh)[1] || 0 }}cm</div>
              <div>高:{{ getlicensePhotoUrl(scope.row.carLwh)[2] || 0 }}cm</div>
            </template>
          </el-table-column>
          <el-table-column prop="carInterUrl" label="车辆内饰" width="120">
            <template slot-scope="scope">
              <div>
                <img
                  v-if="getlicensePhotoUrl(scope.row.carInterUrl)[0]"
                  style="width: 40px; height: 40px; vertical-align: middle"
                  :src="getlicensePhotoUrl(scope.row.carInterUrl)[0] || ''"
                  alt="暂无图片"
                />,
                <img
                  v-if="getlicensePhotoUrl(scope.row.carInterUrl)[1]"
                  style="width: 40px; height: 40px; vertical-align: middle"
                  :src="getlicensePhotoUrl(scope.row.carInterUrl)[1] || ''"
                  alt="暂无图片"
                />,
                <img
                  v-if="getlicensePhotoUrl(scope.row.carInterUrl)[2]"
                  style="width: 40px; height: 40px; vertical-align: middle"
                  :src="getlicensePhotoUrl(scope.row.carInterUrl)[2] || ''"
                  alt="暂无图片"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="carTrunkCount "
            label="车辆行李箱个数"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="carTrunkLwh"
            label="车辆行李箱尺寸"
            width="120"
          >
            <template slot-scope="scope">
              <div>
                长:{{ getlicensePhotoUrl(scope.row.carTrunkLwh)[0] || 0 }}cm
              </div>
              <div>
                宽:{{ getlicensePhotoUrl(scope.row.carTrunkLwh)[1] || 0 }}cm
              </div>
              <div>
                高:{{ getlicensePhotoUrl(scope.row.carTrunkLwh)[2] || 0 }}cm
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="notRunningArea"
            label=" 不可跑区域"
            width="120"
          >
          </el-table-column>
          <el-table-column prop="repairTimeSlot" label="维修时间段" width="200">
          </el-table-column>
          <el-table-column prop="startTime" label="报停后启动时间" width="200">
          </el-table-column>
          <el-table-column prop="downTime" label="下线时间">
            <template slot-scope="scope">
              <span v-html="getTimeText(scope.row.downTime)"></span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            :prop="'mainDriver.realName'"
            :label="'主驾驶员'"
            :width="190"
            :align="'right'"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.mainDriver">
                {{ scope.row.mainDriver.driver.phone }}【{{
                  scope.row.mainDriver.driver.realName
                }}】
              </span>
              <span v-else class="c-gray">未设置主驾驶员 </span>

              <br /><el-button size="mini" @click="handleRowRepaired(scope.row)"
                >维修记录</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <div style="text-align: center; margin: 10px">
          <el-button type="primary" @click="handleAdd">添加</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import elDragDialog from "@/directive/el-drag-dialog";

import { vehicleListFind } from "@/api/services/logistics.service";
import { findRepairTypeList } from "@/api/services/system.service";
export default {
  name: "AddCar",
  directives: { elDragDialog },
  props: ["state", "leaveId"],
  components: {},
  computed: {
    ...mapGetters(["lunitNum", "uname"]),
  },

  data() {
    return {
      // 文件地址前缀
      fileBaseUrl: this.C.fileBaseUrl,
      tableData: [],
      md: { state: this.state },
      dg: {
        selRows: [],
        ps: {
          // 过滤参数
          page: 1,
          rows: 10,
          unitNum: "",
          phone: "", // 驾驶员手机号
          plateNumber: "", // 车牌号
          seats: "", // 座位数
          belongCompany: "", //所属挂靠公司名称
          carUsage: "",
          groupId: "", // 小组ID ， 可以多选
          setime: "",
          startTime: "",
          endTime: "",
          carStatus: "", // 车辆状态
          stayStation: "", // 停靠位置
          vehicleType: "", // 车辆类型
          carColor: "", // 车辆颜色
          serviceType: "", // 运营性质
          isInternet: "", // 能否上网  0 上网； 1 不能上网
        },
      },
      fm: {
        fname: "AddMaintenance",
        sb: { load: false, text: "修改预留信息" },
        ps: {
          note: "", // 预留备注
          plateNum: "", // 车牌号，直接获取原记录车牌号，不能修改
          reserveCount: "", // 预留数量
          reserveEtime: "", // 预留结束时间
          vehicleIds: "", // 选中的车辆的ID
          reserveStime: "", // 预留开始时间
          seats: "", // 座位数
          reserveType: null, // 预留类型 ； 有车号 和无车号
        },
      },
      selRows: null,
    };
  },
  created() {
    this.getDgList();
  },
  methods: {
    init() {
      this.getDgList();
    },
    // 获取驾驶证正面 反面
    getlicensePhotoUrl(val) {
      let url = (val || "").split(",");
      if(url) this.fileBaseUrl + url;
      return url;
    },
    handleAdd() {
      console.log("添加");
    },
    handleSelectionChange(val) {
      console.log(val, "sadadadas999999");
      this.selRows = val;
    },
    /**
     * 展开一行事件
     */
    saveRowExpand(row, expandedRows) {
      const that = this;

      // that.dg.rowExpands.push(row);
    },
    /**
     * 选中行
     * @param selection 选中的所有行
     * @param row       当前被点击的行
     */
    selRow(selection, row) {
      this.dg.selRows = selection;
    },
    /**
     * 获取-车辆分页列表
     */
    getDgList() {
      const that = this;
      const loading = that.U.qloading("数据请求中...");
      // 处理参数
      const setime = that.dg.ps.setime;
      if (setime) {
        that.dg.ps.startTime = setime[0];
        that.dg.ps.endTime = setime[1];
        delete that.dg.ps.setime;
      }
      vehicleListFind(that.dg.ps)
        .then((res) => {
          console.log(res, "  车辆列表的数据");
          if (res.code == one) {
            const { data = [], count = 0 } = res;
            that.tableData = data;
            that.dg.total = count;
            that.U.qclose(loading);
          }
        })
        .catch((err) => {
          that.U.qclose(loading);
        });
    },

    /* 关闭弹框 */
    closeMd() {
      this.$emit("addCarMdState", false);
    },
  },
};
</script>